import React, { Component } from 'react'

/*
    生命周期： 只有类组件会有， 函数式组件没有
        ---> 初始化
            ---> constructor   创建组件时，最先执行，初始化的时候只执行一次：【初始化state、 创建Ref】(新版这两个可以不用在这里写了)、 使用bind解决this指向问题
            ---> render        每次组件渲染都会触发： 渲染UI 、不能调用 setState()
            -------------------以上周期要保持纯净， 不能异步请求或操作dom, 以下的周期可以
            ---> componentDidMount   组件挂载完成后执行，初始化的时候执行一次： 异步请求、 dom操作
        ---> 更新阶段
            ---> render        每次组件渲染都会触发： 渲染UI 、不能调用 setState()
            ---> componentDidUpdate   组件更新（UI渲染完成）后执行： dom操作，不能直接调用 setState
        ---> 卸载阶段
            ---> componentWillUnmount  组件卸载： 清理定时器等
*/

class Test extends Component {
     timer = null

     componentDidMount() {
      timer = setInterval(() => {
        console.log('定时器执行了')
      }, 1000)
     }

    componentWillUnmount() {
        console.log('this is test componentWillUnmount');
        // 销毁定时器
        clearInterval(timer)
    }
    render() {
        return (
          <div>
            Test
          </div>
        )
      }
}


export default class Test10_lifecycle extends Component {
    constructor() {
        super()
        console.log('this is constructor 1');
        // this.state = {                 // 以前16版本

        // }
    }
    // state中尽量保持精简，需要影响视图的状态定义到 state里面
    state = {
        count: 1,
        flag: true
    }
    handleAdd = () => {
        this.setState({
            count: this.state.count + 1,    // 不能使用 this.state.count++, 因为这是在state里的属性，不能修改原值
            flag: !this.state.flag
        })
    }

    componentDidMount() {
        console.log('this is componentDidMount 3');
    }

    componentDidUpdate() {
        console.log('this is componentDidUpdate');
    }

  render() {
    console.log('this is render 2、4++');
    return (
      <div>
        Test10_lifecycle
        <button onClick={this.handleAdd}>{this.state.count}add</button>
        {this.state.flag ? <Test /> : null}
      </div>
    )
  }
}
